// 防抖操作
let input = document.querySelector('#input')

let timer = null

input.oninput = function () {

  // 清除上一次的定时器 只保留最后一次输入定时器
  clearTimeout(timer)

  // 等用户有效输入结束后 再去发送请求...
  timer = setTimeout(() => {
    console.log(this.value)
  }, 1000)

}

// 节流操作 让这个按钮 在规定时间内只能点击一次
let btn = document.querySelector('#btn')
let count = 0

// 立执行函数 保证状态的私有性 无法被外部修改
;
(function () {
  let flag = true

  btn.onclick = function () {

    if (!flag) return

    console.log(++count)

    // 执行完一次就需要等一秒 才能再次执行
    flag = false

    setTimeout(() => {
      flag = true
    }, 1000)
  }
})()

// 防抖函数的封装
function debounce(fn, delay) {
  let timer = null

  // 利用闭包实现
  return function () {


    timer && clearTimeout(timer)

    timer = setTimeout(() => {
      fn.apply(this, arguments)
      timer = null
    }, delay)
  }
}

// function foo() {
//     console.log(this.value)
// }
// input.oninput = debounce(foo, 2000)

// 节流函数的封装
function throttle(fn, delay) {
  let flag = true

  return function () {

    if (!flag) return

    flag = false

    setTimeout(() => {

      fn.apply(this, arguments)
      flag = true
    }, delay)
  }
}

function fo() {
  console.log('投票成功！')
}
btn.addEventListener('click', throttle(fo, 1000))